<script setup lang="ts">
import Content from '@/components/Content/index.vue'
import UploadMusicProgress from '@/components/UploadMusicProgress/index.vue'
import PushItem from './components/PushItem/index.vue'
import TranscodingMusic from '@/components/TranscodingMusic/index.vue'
import { WarningFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import type { FileType, Emits } from './utils/types'
import APIUploadMaterial from '@/api/upload-material'

const $emit = defineEmits<Emits>()
const fileRef = shallowRef<HTMLInputElement>()
const fileMusicRef = shallowRef<HTMLInputElement>()
const fileType = shallowRef<FileType>()
const objectFile = ref<any>({})
const disabledUploadFiles = shallowRef<boolean>(false)

function handleUpload(str: FileType) {
    fileType.value = str
    if (objectFile.value[str] && str != 'copyright_image') {
        ElMessage.error('已上传该文件，请删除对应的文件后再重新操作')
        return
    }
    fileRef.value?.click()
}

function onChangeFile(e: Event) {
    const dom = e.target as HTMLInputElement
    const files = dom.files
    if (!files || !fileType.value) return
    if (!['image/jpeg', 'image/png', 'image/bmp', 'image/tiff', 'image/svg+xml', 'image/webp', 'image/heif', 'image/heic', 'image/x-icon'].includes(files[0].type)) {
        dom.value = ''
        ElMessage.error('只能上传图片文件类型')
        return
    }
    objectFile.value[fileType.value] = files[0]
    dom.value = ''
}

function handleUploadMusic() {
    if (objectFile.value['music_file']) {
        ElMessage.error('已上传该文件，请删除对应的文件后再重新操作')
        return
    }
    fileMusicRef.value?.click()
}

function onChangeMusicFile(e: Event) {
    const dom = e.target as HTMLInputElement
    const files = dom.files
    if (!files) return
    if (!files[0].type.includes('audio')) {
        dom.value = ''
        ElMessage.error('只能上传音频文件类型')
        return
    }
    objectFile.value['music_file'] = files[0]
    dom.value = ''
}

function onRemove(str: FileType) {
    objectFile.value[str] = undefined
}

const isShowUpload = computed(() => {
    return objectFile.value['main_image'] && objectFile.value['score'] && objectFile.value['copyright_image'] && objectFile.value['music_file']
})

const isShowEmpty = computed(() => {
    return objectFile.value['main_image'] || objectFile.value['score'] || objectFile.value['copyright_image'] || objectFile.value['music_file']
})

const mainImageRef = shallowRef<InstanceType<typeof UploadMusicProgress>>()
const scoreRef = shallowRef<InstanceType<typeof UploadMusicProgress>>()
const copyrightImageRef = shallowRef<InstanceType<typeof UploadMusicProgress>>()
const musicFileRef = shallowRef<InstanceType<typeof UploadMusicProgress>>()
const formFile = ref<any>({})

function handleUploadFiles() {
    disabledUploadFiles.value = true
    mainImageRef.value?.handleNormalUpload()
    scoreRef.value?.handleNormalUpload()
    copyrightImageRef.value?.handleNormalUpload()
}

function onNormalUpload(value: string | string[], str: FileType) {
    formFile.value[str] = value
}

const transcodingMusic = ref<any[]>([])

function onSuccess(code: string) {
    ElMessage.success('已全部上传完毕')
    formFile.value = {}
    objectFile.value = {}
    transcodingMusic.value.push(code)
    getIsPusMusic()
    disabledUploadFiles.value = false
}

watch(formFile, (newValue) => {
    if (newValue.main_image && newValue.score && newValue.copyright_image && newValue.copyright_image.length != 0) {
        musicFileRef.value?.handleUpload()
    }
}, { deep: true })

const isPusMusicList = ref<any[]>([])
const loading = shallowRef<boolean>(false)

function getIsPusMusic() {
    loading.value = true
    APIUploadMaterial.getIsPusMusic().then(({ data }) => {
        isPusMusicList.value = data
    }).finally(() => {
        loading.value = false
    })
} getIsPusMusic()

function onTranscodingSuccess(index: number) {
    transcodingMusic.value.splice(index, 1)
    getIsPusMusic()
}

defineExpose({
    disabledUploadFiles
})

</script>

<template>
    <div class="music">
        <div class="btns">
            <div class="btns-left">
                <button class="btns-left-btn" type="button" @click="handleUpload('main_image')">
                    <p>+</p>
                    <p>上传音乐封面</p>
                </button>
                <button class="btns-left-btn" type="button" @click="handleUploadMusic">
                    <p>+</p>
                    <p>音乐源文件(无需打包)</p>
                </button>
                <button class="btns-left-btn" type="button" @click="handleUpload('score')">
                    <p>+</p>
                    <p>音乐版权证明</p>
                </button>
                <input type="file" @change="onChangeFile" style="display: none;" ref="fileRef" accept="image/*" />
                <input type="file" @change="onChangeMusicFile" style="display: none;" ref="fileMusicRef"
                    accept="audio/*" />
            </div>
            <el-button v-if="isShowUpload" type="danger" class="btns-right" @click="handleUploadFiles"
                :disabled="disabledUploadFiles">上传</el-button>
        </div>
        <div class="btn-music">
            <div class="btn-music-btns">
                <button class="btn-music-btn" @click="handleUpload('copyright_image')">
                    <p>+</p>
                    <p>曲谱/制作截图</p>
                </button>
            </div>
            <div class="btn-music-text">
                <el-icon>
                    <WarningFilled />
                </el-icon>
                上传了版权证明，可以不上传曲谱/制作截图，为更好的销售，系统建议上传；
            </div>
        </div>
        <Content class="center">
            <div class="empty" v-if="!isShowEmpty">在“上传音乐封面、音乐源文件、音乐版权证明、曲谱/制作截图"处添加上传文件</div>
            <TransitionGroup name="list">
                <UploadMusicProgress ref="mainImageRef" type="main_image" v-if="objectFile.main_image"
                    :file="objectFile.main_image" @on-remove="onRemove('main_image')"
                    @on-normal-upload="onNormalUpload($event, 'main_image')" />
                <UploadMusicProgress ref="musicFileRef" type="music_file" v-if="objectFile.music_file"
                    :file="objectFile.music_file" @on-remove="onRemove('music_file')" @on-success="onSuccess"
                    :form-file="formFile" />
                <UploadMusicProgress ref="scoreRef" type="score" v-if="objectFile.score" :file="objectFile.score"
                    @on-remove="onRemove('score')" @on-normal-upload="onNormalUpload($event, 'score')" />
                <UploadMusicProgress ref="copyrightImageRef" type="copyright_image" v-if="objectFile.copyright_image"
                    :file="objectFile.copyright_image" @on-remove="onRemove('copyright_image')"
                    @on-normal-upload="onNormalUpload($event, 'copyright_image')" />
            </TransitionGroup>
        </Content>
        <div class="push-list" v-loading="loading">
            <TranscodingMusic v-for="(item, index) in transcodingMusic" :key="index" :code="item"
                @on-success="onTranscodingSuccess(index)" />
            <PushItem v-for="item in isPusMusicList" :key="item.goods_id" :item="item" @get-is-pus="getIsPusMusic"
                @close="$emit('close')" />
        </div>
    </div>
</template>

<style lang="scss" scoped>
.music {
    .push-list {
        width: 900px;
        display: grid;
        grid-template-columns: repeat(4, 200px);
        margin-top: 54px;
        justify-content: space-between;
        gap: 30px 0;
    }

    .btn-music {
        .btn-music-btns {
            display: flex;
            gap: 0 34px;

            .btn-music-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 175px;
                height: 38px;
                border-radius: 5px;
                cursor: pointer;
                background-color: #ffffff;
                border: 1px dashed rgba(206, 206, 206, 1);
                gap: 0 10px;
                margin-top: 24px;

                p {
                    &:first-child {
                        color: #ff0000;
                        font-size: 30px;
                        font-weight: 100;
                        line-height: 15px;
                    }

                    &:last-child {
                        font-size: 14px;
                        color: #9A9A9A;
                    }
                }
            }
        }

        .btn-music-text {
            display: flex;
            align-items: center;
            color: #BBBBBB;
            font-size: 12px;
            margin-top: 20px;
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
        }
    }

    .center {
        margin-top: 20px;
        min-height: 172px;
        position: relative;
        padding: 8px 12px;
        box-sizing: border-box;

        .empty {
            font-size: 13px;
            color: #9A9A9A;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
            width: 100%;
            text-align: center;
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
        }
    }

    .btns {
        display: flex;
        justify-content: space-between;

        .btns-right {
            width: 170px;
            height: 38px;
            line-height: 20px;
            border-radius: 5px;
            font-size: 14px;
            letter-spacing: 5px;
            background-color: #F91B1B;
        }

        .btns-left {
            display: flex;
            gap: 0 34px;

            .btns-left-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 175px;
                height: 38px;
                border: none;
                border-radius: 5px;
                font-size: 14px;
                cursor: pointer;
                background-color: rgba(55, 133, 242, 1);
                color: rgba(255, 255, 255, 1);
                gap: 0 5px;
            }


            .btns-left-btn-music {
                background-color: #ffffff;
                color: #ff0000;
                border: 1px solid rgba(206, 206, 206, 1);
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 0 10px;
            }
        }
    }
}

.list-enter-active,
.list-leave-active {
    transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
</style>
